<template>
  <div class="boxInfo">
    <!-- 表单内容 -->
    <div class="formInfo">
      <!-- 头部信息  -->
      <div class="userInfo">
        <div class="headInfo clearfix">
          <div class="headText">

            <el-form ref="formData" :model="userInfo" label-width="215px" label-position="right">
              <el-row>
                <el-col :span="13" :xs="24">
                  <el-form-item label="用户名" prop="title">
                    <el-input v-model="userInfo.name" placeholder="请输入用户名" size="small"/>
                  </el-form-item>
                  <el-form-item label="手机号" prop="title">
                    <el-input v-model="userInfo.id" placeholder="请输入用户名" size="small" />
                  </el-form-item>
                  <el-form-item label="年龄" prop="title">
                    <el-input v-model="userInfo.age" placeholder="请输入用户名" size="small"/>
                  </el-form-item>
                  <el-form-item label="邮箱" :rules="[
                     { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                     { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                  ]">
                    <el-input v-model="userInfo.email"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11" :xs="24" style="float: right">
                  <el-form-item label="个人照片：">
                    <RegShopImg :imgN='3' :userImage='userInfo.avatar' :userId="userInfo.id" ref="staffPhoto"></RegShopImg>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="13" :xs="24">
                  <el-form-item label="现居地址" prop="title">
                    <el-input v-model="userInfo.address" placeholder="现居地址" size="small" />
                  </el-form-item>
                </el-col>
                <el-col :span="11" :xs="24" style="float: right">
                  <el-form-item label="入职时间" prop="title">
                    <el-input v-model="userInfo.createTime" placeholder="入职时间" size="small" disabled/>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="10" :xs="24" >
                  <el-form-item label="性别" prop="title">
                    <el-radio-group v-model="userInfo.sex" size="small" >
                      <el-radio :label="1" value="1">男</el-radio>
                      <el-radio :label="0" value="0">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>

              </el-row>

              <el-row :span="42" style="float: right">
                <span class="textR">  </span>
                <el-button type="primary" @click="updateUser()">保存更新</el-button>
              </el-row>
            </el-form>

          </div>
        </div>
      </div>
      <!-- 头部信息 end  -->
    </div>
  </div>
</template>

<script>
import RegShopImg from './imgUpload2'
import {getInfo} from "@/api/user";  // 图片页面
import {getUserById, updateUserInfo,isUserByPhone} from '@/api/system'

export default {
  components: { RegShopImg: RegShopImg},
  data(){
    return{
      userInfo:{}
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo(){
      getInfo().then(res => {
        getUserById(res.data.id).then(res2 => {
          this.userInfo = res2.data
        })
      })
    },

    updateUser(){
      updateUserInfo(this.userInfo).then(res => {
        if(res.data){
          this.$message({
            message: '修改成功!',
            type: 'success'
          });
        }
      })
    }
  }
}
</script>
